/*
 * @Author: hanyu
 * @Date: 2018-05-07 09:46:58 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-07-11 11:39:41
 */
<template>
    <div id="radaChart" style="width:603px;min-height:230px;height:603px">
    </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      myChart: null,
      dataOption: {},
      noData: false,
      time: null
    };
  },
  watch: {
    value(newValue, oldValue) {
      if (newValue.length === 0) {
        this.$set(this, "noData", true);
      } else {
        this.$set(this, "noData", false);
        this.setOption(newValue);
        this.time = setInterval(() => {
          this.setOption(newValue);
        }, 6000);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  mounted() {
    this.setOption();
  },
  methods: {
    setOption(res) {
      var option = {
        legend: {
          bottom: 10,
          itemWidth: 8,
          itemHeight: 8,
          data: [
            {
              name: "房联行",
              icon: "circle"
            },
            {
              name: "懿皇置业",
              icon: "circle"
            }
          ],
          textStyle: {
            color: "#55EEA8"
          }
        },
        radar: {
          radius: "80%",
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              color: "#55EEA8",
              opacity: 0.2
            }
          },
          splitLine: {
            lineStyle: {
              color: "#55EEA8",
              type: "dashed"
            }
          },
          splitArea: {
            areaStyle: {
              color: "rgba(0,0,0,0.2)"
            }
          },
          indicator: [
            {
              name: "涧西区",
              max: 6000
            },
            {
              name: "西工区",
              max: 16000
            },
            {
              name: "老城区",
              max: 30000
            },
            {
              name: "瀍河区",
              max: 35000
            },
            {
              name: "洛龙西区",
              max: 50000
            },
            {
              name: "洛龙北区",
              max: 25000
            },
            {
              name: "洛龙东区",
              max: 25000
            }
          ]
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            symbolSize: 0,
            data: [
              {
                value: [5000, 15000, 22000, 31000, 25000, 20000],
                name: "房联行",
                lineStyle: {
                  color: "rgba(30,194,255,0.8)",
                  width: 2
                },
                areaStyle: {
                  normal: {
                    shadowBlur: 13,
                    shadowColor: "rgba(0,0,0,.2)",
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                    opacity: 1
                  }
                }
              },
              {
                value: [2500, 12000, 8000, 8500, 12000, 12000],
                name: "懿皇置业",
                lineStyle: {
                  color: "rgba(255,216,26,0.8)",
                  width: 2
                },
                areaStyle: {
                  normal: {
                    shadowBlur: 13,
                    shadowColor: "rgba(0,0,0,.2)",
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                    opacity: 1
                  }
                }
              }
            ]
          }
        ],
        color: ["rgba(30,194,255,0.8)", "rgba(255,216,26,0.8)"],
        backgroundColor: "transparent"
      };
      self.myChart = echarts.init(document.getElementById("radaChart"), null, {
        devicePixelRatio: 2
      });
      self.myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.noData {
  color: white;
  text-align: center;
  font-size: 20px;
  margin-top: 50px;
}
</style>